<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试页面</title>
    <style>
      .box1 {
        display: flex;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <h2>测试用网页1212</h2>
    <button id="button1">测试sayHi</button>
    <button id="button2">测试queryUser</button>
    <button id="button3">测试removeUser</button>
    <button id="button4">测试相册服务</button>
    <button id="button5">测试拍照服务</button>
    <button id="button6">测试手机震动</button>
    <button id="button7">测试省市区</button>
    <p>用户信息</p>
    <div class="box1">
      <img style="width: 80vw" src="" alt="" />
    </div>
    <script>
      const btn1 = document.getElementById("button1");
      const btn2 = document.getElementById("button2");
      const btn3 = document.getElementById("button3");
      const btn4 = document.getElementById("button4");
      const btn5 = document.getElementById("button5");
      const btn6 = document.getElementById("button6");
      const btn7 = document.getElementById("button7");

      btn1.addEventListener("click", async () => {
        mk.sayHi("测试一下注入的sayHi方法");
      });
      btn2.addEventListener("click", async () => {
        // 测试查询用户信息
      
        console.log(window.mk);
        const userInfo = mk.queryUser();
        document.querySelector("p").innerText = JSON.stringify(userInfo);
      });
      btn3.addEventListener("click", async () => {
        // 测试删除用户信息
        mk.removeUser();
      });

      btn4.addEventListener("click", async () => {
        const str = await mk.pickerPhoto();
        console.log(str);
        // 显示base64图片，需要添加前缀标识，否者图片无法展示
        document.querySelector("img").src = `data:image/jpeg;base64,${str}`;
      });
      btn5.addEventListener("click", async () => {
        // 拍照
        const str = await mk.pickerCamera();
        console.log(str);
        document.querySelector("img").src = `data:image/jpeg;base64,${str}`;
      });
      btn6.addEventListener("click", async () => {
        // 马达震动
        mk.vibrate();
      });
      btn7.addEventListener("click", async () => {
        // 省市区选择
        const result = await mk.getAreaColumns();
        console.log(result);
      });
    </script>
    <!-- 引入调试控制台 -->
    <script src="./eruda.min.js"></script>
    <script>
      eruda.init();
    </script>
  </body>
</html>
